<template>
  <div class="b-s w-10 f-48">
    <!--====================选择城市==========================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>选择城市</div>
          <div class="flex address-ct">
            <div class="f-39 add-item">
              北京
              <img src="/static/images/arr-down.png" class="arr-down">
            </div>
            <div class="f-39 add-item">
              朝阳区
              <img src="/static/images/arr-down.png" class="arr-down">
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>户口类型</div>
          <div class="f-39 ">
            外地城镇
            <img src="/static/images/arr-down.png" class="arr-down">
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>社保基数</div>
          <div class="f-39 ">3400</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>公积金基数</div>
          <div class="f-39 ">2450.00</div>
        </div>
      </div>
    </div>
    <!--======================社保与公积金明细=============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb title item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>社保与公积金明细</div>
        </div>
      </div>
      <div class="social-range">
        <div class="cal-base">社保缴纳基数：3434.00-3243425.55</div>
        <div class="cal-base">公积金缴纳基数：3434.00-3243425.55</div>
      </div>
      <div class="w-10 cal-outer">
        <div class="flex-c cal-title">
          <div class="t-item">缴纳项目</div>
          <div class="t-item al-c">缴纳基数</div>
          <div class="t-item al-c">个人缴纳</div>
          <div class="t-item al-c">单位缴纳</div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">养老</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">医疗</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">失业</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">工伤</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">生育</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">大额医疗</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
        <div class="flex-c cal-item">
          <div class="t-item bd-r">公积金</div>
          <div class="t-item bd-r al-c">4564</div>
          <div class="t-item bd-r al-c">
            3456
            <span class="c-a5">(12%)</span>
          </div>
          <div class="t-item al-c">
            3566
            <span class="c-a5">(8%)</span>
          </div>
        </div>
      </div>
      <!--=====================合计==============================-->
      <div class="w-10 total-outer">
        <div class="flex-c jc-sb total-ct">
          <div>个人社保合计</div>
          <div class="f-39 ">234543元</div>
        </div>
        <div class="flex-c jc-sb total-ct">
          <div>单位社保合计</div>
          <div class="f-39 ">6767元</div>
        </div>
        <div class="flex-c jc-sb total-ct">
          <div>公积金合计</div>
          <div class="f-39 ">3400元</div>
        </div>
        <div class="flex-c jc-sb total-ct">
          <div>总计</div>
          <div class="f-39 ">2450.00元</div>
        </div>
      </div>
    </div>
    <!--===================================================-->
    <div class="w-10 btn-ct">
      <div class="cm-btn login-btn" @click="flogout">计算</div>
    </div>
  </div>
</template>

<script>
import sowingMap from '@/components/common/sowingMap'
import { mixinParams } from '@/vmixin/vmixin'
export default {
  data () {
    return {
      selectedIndex: 1,
      memberPhone: ''
    }
  },
  created () {},
  mounted () {},
  filters: {
    // moneyFilter(){
    //     return "33"
    // }
  },
  mixins: [mixinParams],
  components: {
    sowingMap
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    sortgroupcity () {
      let sortobj = {}
      return sortobj
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    // 退出登录
    flogout () {
      console.log('退出登录')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.al-c {
  justify-content: center;
}
.add-item{
  width: cmSize(360);
  text-align: right;
}
.block-ct {
  margin-bottom: cmSize(40);
  background: #ffffff;
}
.arr-down {
  width: cmSize(80);
  height: cmSize(80);
  vertical-align: middle;
}
.item-ct {
  height: cmSize(160);
  padding: 0 cmSize(60);
}
.name-ct {
  height: cmSize(160);
  flex: 1 1 3rem;
}
.social-range {
  padding: cmSize(40) cmSize(60);
}
.cal-base {
  height: cmSize(80);
  line-height: cmSize(80);
}

.title {
  background-color: #69c16a;
  color: #ffffff;
  height: cmSize(120);
}
.line {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}
.btn-ct {
  padding: cmSize(60);
}
/********************/
.cal-outer {
  padding: 0 cmSize(60);
}
.cal-title {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.t-item {
  height: cmSize(130);
  flex: 1 1 2rem;
  align-items: center;
  display: flex;
}
.bd-r {
  border-right: 1px solid #eeeeee;
}
.total-outer {
  border-top: 1px solid #eeeeee;
}
.total-ct {
  height: cmSize(120);
  flex: 1 1 3rem;
  padding: 0 cmSize(60);
}
/********************/
</style>
